<html>
<head>
<title>Hello Ext</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript">
	var uname = new Ext.form.TextField({
		id : 'uname',
		fieldLabel : '用户名',
		name : 'name',//元素名称
		allowBlank : false,//不允许为空
		anchor:'95%',
		value : "",
		blankText : '用户名不能为空'//错误提示内容
	});
	var pwd = new Ext.form.TextField({
		id : 'pwd',
		inputType : 'password',
		fieldLabel : '密　码',
		anchor:'95%',
		maxLength : 10,
		name : 'password',
		allowBlank : false,
		value : "",
		blankText : '密码不能为空'
	});

	Ext.onReady(function() {
		//使用表单提示
		Ext.QuickTips.init();
		Ext.form.Field.prototype.msgTarget = 'side';
		//定义表单
		var simple = new Ext.FormPanel({
			labelWidth : 75,
			defaults : {
				width : 150
			},
			defaultType : 'textfield',//默认字段类型
			bodyStyle : 'background: #cdcdcd;padding:30 0 0 20;',
			border : false,
			buttonAlign : 'center',
			border : false,
			id : "form",
			//定义表单元素
			items : [ uname, pwd ],
			buttons : [ {
				text : '登录',
				type : 'submit',
				id : 'login',
				//定义表单提交事件
				handler : save
			}, {
				text : '重置',
				handler : function() {
					uname.setValue('');
					pwd.setValue('');
				}
			} ],
			keys : [ {
				key : Ext.EventObject.ENTER,
				fn : save,
				scope : this
			} ]
		});
		function save() {
			var userName = uname.getValue();
			var userPass = pwd.getValue();
			//验证合法后使用加载进度条
			if (simple.form.isValid()) {
				//提交到服务器操作
				simple.form.submit({
					waitMsg : '正在进行登陆验证,请稍后...',
					url : 'rest/user/authenticateUser',
					method : 'post',
					params : {
						'username' : userName,
						'password' : userPass
					},
					//提交成功的回调函数
					success : function(form, action) {
						window.location.href = "index.html";
					},
					//提交失败的回调函数
					failure : function(form, action) {
						Ext.Msg.alert('错误提示', '用户名或者密码错误！');
					}
				});
			}
		}
		//定义窗体
		var win = new Ext.Window({
			id : 'win',
			layout : 'fit', //自适应布局   
			align : 'center',
			width : 330,
			height : 182,
			resizable : false,
			draggable : false,
			border : false,
			bodyStyle : 'padding:5px;background:gray',
			maximizable : false,//禁止最大化
			closeAction : 'close',
			closable : false,//禁止关闭,
			items : simple
		});
		win.show();
		uname.focus(false, 100);
	});
</script>
</head>
<body>
</body>
</html>